import React, { Component } from "react";

class Child extends Component {
  // 18版本react这个性能优化生命周期已经不存在以前重复渲染的问题

  // shouldComponentUpdate(nextProps, nextState) {
  //   if (nextProps.current === this.props.current) {
  //     console.log(nextProps.current);
  //     return true;
  //   }
  //   return false;
  // }
  render() {
    return (
      <div
        style={{
          width: "100px",
          height: "100px",
          border:
            this.props.current === this.props.index
              ? "1px solid red"
              : "1px solid #000",
          float: "left",
          margin: "10px",
        }}
      >
        0
      </div>
    );
  }
}

export default class App extends Component {
  state = {
    list: ["00", "10", "20", "03", "40", "50", "60", "70", "80", "09"],
    current: 3,
  };

  render() {
    console.log("render");
    return (
      <div>
        <div>
          <input
            type="number"
            value={this.state.current}
            onChange={(e) => {
              this.setState({
                current: Number(e.target.value),
              });
            }}
          />
        </div>
        <div>
          {this.state.list.map((item, index) => (
            <Child
              key={item}
              current={this.state.current}
              index={index}
            ></Child>
          ))}
        </div>
      </div>
    );
  }
}
